<template>
  <div class="container">
    <h1>Why do we have to await json?</h1>
    <div>
      <div id="fetch-json-function-box" class="function-box" ref="fetchJsonFunctionBox">
        Clicking this button will run the function below. You'll need to
        LOOK IN THE CONSOLE to see the results.<br/><br/>
      </div>
      <button id="fetch-json" ref="fetchJsonButton" @click="fetchJson">fetch json</button>
    </div>
    <hr/>
    <div>
      <div id="fetch-stream-function-box" class="function-box" ref="fetchStreamFunctionBox"></div>
      <button id="fetch-stream" ref="fetchStreamButton" @click="fetchStream">stream json</button>
      <div class="output-box" ref="outputBox">...content will be streamed here...</div>
    </div>
  </div>
</template>
<script setup lang="js">
import {ref} from "vue"

export default {
  setup() {
    let fetchJsonButton = ref()
    let fetchStreamButton = ref()
    let fetchJsonFunctionBox = ref()
    let fetchStreamFunctionBox = ref()
    let outputBox = ref()

    async function wait(ms) {
      return new Promise((res) => setTimeout(res, ms))
    }

    const fetchJson = async function () {
      console.log("making request")
      let response = await fetch("/json")
      console.log("got response headers, now waiting for the body")
      let myObject = await response.json()
      console.log("turned the JSON in an object")
      console.log(myObject)
    }

    const fetchStream = async function () {
      outputBox.textContent = ""
      let response = await fetch("/json")
      const decoder = new TextDecoder("utf-8")
      for await (const value of response.body) {
        const chunk = decoder.decode(value)
        outputBox.textContent += chunk
      }
    }

    return {
      fetchJson,
      fetchStream,
      fetchJsonButton,
      fetchStreamButton,
      fetchJsonFunctionBox,
      fetchStreamFunctionBox,
      outputBox
    }
  }
}
//
//
//// show the user what the functions do
//// fetchJsonFunctionBox.innerText += fetchJson.toString()
//// fetchStreamFunctionBox.innerText += fetchStream.toString()

</script>
<style scoped>

.container {
  background-color: #fbf1c7;
  color: #282828;
  font-family: monospace;
  max-width: 65ch;
  margin: 1rem auto;
}

h1 {
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

button {
  background-color: #6200ea;
  color: #fff;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #3700b3;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

button:active {
  background-color: #3700b3;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #6200ea, #3700b3);
  margin: 20px 0;
}

.function-box {
  border: solid 2px #6200ea;
  margin: 1rem auto;
  padding: 1rem;
}

.output-box {
  margin: 1rem auto;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(to right, #6200ea, #3700b3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
